<script setup lang="ts">
import { markRaw } from "vue";
import { randomGradient } from "./utils";
import { useRenderFlicker } from "@/components/ReFlicker";
import ReCol from "@/components/ReCol";

import { useWelcome } from "./utils/hook";

const { articleList } = useWelcome();

defineOptions({
  name: "Welcome"
});
</script>

<template>
  <div>
    <el-row :gutter="24" justify="space-around">
      <re-col
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
      >
        <el-card class="line-card h-36" shadow="never"> 1 </el-card>
      </re-col>
      <re-col
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
      >
        <el-card class="line-card h-36" shadow="never"> 2 </el-card>
      </re-col>
      <re-col
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
      >
        <el-card class="line-card h-36" shadow="never"> 3 </el-card>
      </re-col>
      <re-col
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
      >
        <el-card class="line-card h-36" shadow="never"> 4 </el-card>
      </re-col>
      <re-col
        class="mb-[18px]"
        :value="18"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
      >
        <el-card class="line-card h-96" shadow="never"> 5 </el-card>
      </re-col>
      <re-col
        class="mb-[18px]"
        :value="6"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 640
          }
        }"
      >
        <el-card class="h-96" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">文章动态</span>
          </div>
          <el-scrollbar max-height="310" class="mt-3">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in articleList"
                :key="index"
                center
                placement="top"
                :icon="
                  markRaw(
                    useRenderFlicker({
                      background: randomGradient({
                        randomizeHue: true
                      })
                    })
                  )
                "
                :timestamp="item.createdAt"
              >
                <p class="text-text_color_regular text-sm">
                  {{ `新增文章：${item.title} ` }}
                </p>
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>
        </el-card>
      </re-col>
      <re-col
        class="mb-[18px]"
        :value="18"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
      >
        <el-card class="line-card h-96" shadow="never"> 7 </el-card>
      </re-col>
      <re-col
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
      >
        <el-card class="line-card h-96" shadow="never"> 8 </el-card>
      </re-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
